<template>
  <div class="page-container">
    <div class="bill-history-container">
      <!-- 数据表格 -->
      <a-card class="table-card">
        <template #title>
          <div class="card-title">
            <file-text-outlined />
            <span>历史账单</span>
          </div>
        </template>
        <a-table
          :dataSource="billHistory"
          :pagination="{ pageSize: 6 }"
          :bordered="true"
          class="custom-table"
        >
          <a-table-column
            title="账单日期"
            dataIndex="billDate"
            key="billDate"
            :customRender="({ text }) => dayjs(text).format('YYYY-MM-DD')"
            align="center"
          >
            <template #headerCell>
              <span class="column-header">账单日期</span>
            </template>
          </a-table-column>
          <a-table-column
            title="总支出"
            dataIndex="totalExpense"
            key="totalExpense"
            :customRender="({ text }) => `¥${Number(text).toFixed(2)}`"
            align="right"
          >
            <template #headerCell>
              <span class="column-header">总支出</span>
            </template>
          </a-table-column>
          <a-table-column
            title="水费支出"
            dataIndex="waterExpense"
            key="waterExpense"
            :customRender="({ text }) => `¥${Number(text).toFixed(2)}`"
            align="right"
          >
            <template #headerCell>
              <span class="column-header">水费支出</span>
            </template>
          </a-table-column>
          <a-table-column
            title="电费支出"
            dataIndex="electricityExpense"
            key="electricityExpense"
            :customRender="({ text }) => `¥${Number(text).toFixed(2)}`"
            align="right"
          >
            <template #headerCell>
              <span class="column-header">电费支出</span>
            </template>
          </a-table-column>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import { getRecentBill } from "@/api/user";
import { FileTextOutlined } from "@ant-design/icons-vue";

const loading = ref(false);
const billHistory = ref([]);
const total = ref(0);
// 获取历史账单数据
const getBillHistory = async () => {
  loading.value = true;
  try {
    const res = await getRecentBill();
    if (res.data.code === 0 && res.data.data) {
      billHistory.value = res.data.data;
      total.value = res.data.data.length;
      console.log("获取历史账单成功");
    }
  } catch (error) {
    console.error("获取历史账单失败:", error);
    message.error("获取历史账单失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getBillHistory();
});
</script>

<style scoped>
.page-container {
  height: calc(100vh - 64px); /* 减去顶部导航栏的高度 */
  overflow-y: auto;
  background-color: #f0f2f5;
}

.bill-history-container {
}

.search-card {
  margin-bottom: 24px;
}

.table-card {
  background: #fff;
  border-radius: 8px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.ant-card-body) {
  padding: 24px;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-table-pagination) {
  margin: 16px 0;
}

:deep(.column-header) {
  font-weight: 500;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
}
</style>
